<!--实时监控首页-->
<template>
  <div class="app-container v-flex" style="background-color: rgb(229, 231, 235); display: flex; flex-direction:row; justify-content: space-between;">
    <div class="col1">
      <div class="row1">
        <div class="header">
          <div class="line" />
          <div class="text">设备概况</div>
        </div>
        <div class="container">
          <!-- 1 -->
          <div class="card_box" @click="gotoProduct">
            <div class="card_top">
              <img class="img" src="@/assets/images/c6/pnum.png" alt>
              <div class="middle_box">
                <div class="text">产品数量</div>
                <div class="value">{{ productStatistic.TOTAL }}</div>
              </div>
            </div>
            <div class="card_bottom">
              <div class="text-box">
                <div class="text">启用</div>
                <div class="value">{{ productStatistic.ENABLE }}</div>
              </div>
              <div class="vertical" />
              <div class="text-box">
                <div class="text">禁用</div>
                <div class="value">{{ productStatistic.DISABLE }}</div>
              </div>
            </div>
          </div>
          <!-- 2 -->
          <div class="card_box" @click="gotoDevice">
            <div class="card_top">
              <img class="img" src="@/assets/images/c6/dnum.png" alt>
              <div class="middle_box">
                <div class="text">设备数量</div>
                <div class="value">{{ deviceStatistic.TOTAL }}</div>
              </div>
            </div>
            <div class="card_bottom">

              <div class="text-box">
                <div class="text">初始化</div>
                <div class="value">{{ deviceStatistic.INIT_COUNT }}</div>
              </div>
              <div class="vertical" />
              <div class="text-box">
                <div class="text">在线</div>
                <div class="value">{{ deviceStatistic.ONLINE_COUNT }}</div>
              </div>
              <div class="vertical" />
              <div class="text-box">
                <div class="text">离线</div>
                <div class="value">{{ deviceStatistic.OFFLINE_COUNT }}</div>
              </div>

            </div>
          </div>
          <!-- 3 -->
          <div class="card_box">
            <div class="card_top">
              <img class="img" src="@/assets/images/c6/wnum.png" alt>
              <div class="middle_box">
                <div class="text">报警数量</div>
                <div class="value">{{ alarmStatistic.TOTAL }}</div>
              </div>
            </div>
            <div class="card_bottom">
              <div class="text-box">
                <div class="text">今日报警数</div>
                <div class="value">{{ alarmStatistic.TODAY_COUNT }}</div>
              </div>
            </div>
          </div>
          <!--          <div class="card_box">-->
          <!--            <img class="img" src="@/assets/images/c6/product.png" alt>-->
          <!--            <div class="middle_box">-->
          <!--              <div class="value">{{ productStatistic.TOTAL }}</div>-->
          <!--              <div class="text">产品数量</div>-->
          <!--            </div>-->
          <!--            <div class="vertical" />-->
          <!--            <div class="right_box">-->
          <!--              <div class="text-box">-->
          <!--                <div class="spot" style="background-color: #52c41a" />-->
          <!--                <div class="text">启用</div>-->
          <!--                <div class="value">{{ productStatistic.ENABLE }}</div>-->
          <!--              </div>-->
          <!--              <div class="text-box">-->
          <!--                <div class="spot" style="background-color: #ff4d4f" />-->
          <!--                <div class="text">禁用</div>-->
          <!--                <div class="value">{{ productStatistic.DISABLE }}</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="card_box">-->
          <!--            <img class="img" src="@/assets/images/c6/device.png" alt>-->
          <!--            <div class="middle_box">-->
          <!--              <div class="value">{{ deviceStatistic.TOTAL }}</div>-->
          <!--              <div class="text">设备数量</div>-->
          <!--            </div>-->
          <!--            <div class="vertical" />-->
          <!--            <div class="right_box">-->
          <!--              <div class="text-box">-->
          <!--                <div class="spot" style="background-color: #FFC851" />-->
          <!--                <div class="text">初始化</div>-->
          <!--                <div class="value">{{ deviceStatistic.INIT_COUNT }}</div>-->
          <!--              </div>-->
          <!--              <div class="text-box">-->
          <!--                <div class="spot" style="background-color: #52c41a" />-->
          <!--                <div class="text">在线</div>-->
          <!--                <div class="value">{{ deviceStatistic.ONLINE_COUNT }}</div>-->
          <!--              </div>-->
          <!--              <div class="text-box">-->
          <!--                <div class="spot" style="background-color: #ff4d4f" />-->
          <!--                <div class="text">离线</div>-->
          <!--                <div class="value">{{ deviceStatistic.OFFLINE_COUNT }}</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="card_box">-->
          <!--            <img class="img" src="@/assets/images/c6/alarm.png" alt>-->
          <!--            <div class="middle_box">-->
          <!--              <div class="value">{{ alarmStatistic.TOTAL }}</div>-->
          <!--              <div class="text">报警数量</div>-->
          <!--            </div>-->
          <!--            <div class="vertical" />-->
          <!--            <div class="right_box">-->
          <!--              <div class="text-box">-->
          <!--                <div class="spot" style="background-color: #ff4d4f" />-->
          <!--                <div class="text">今日报警数</div>-->
          <!--                <div class="value">{{ alarmStatistic.TODAY_COUNT }}</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
      </div>
      <div class="row2">
        <div class="header">
          <div class="line" />
          <div class="text">设备分布</div>
        </div>
        <div class="map_box">
          <Map class="chart-map" />
        </div>
      </div>
    </div>
    <div class="col2">
      <div class="row1">
        <div class="header">
          <div class="line" />
          <div class="text">设备状态统计</div>
        </div>
        <div id="stateChart" ref="state-chart" class="chart" />
      </div>
      <div class="row2">
        <div class="header">
          <div class="line" />
          <div class="text">设备类型分布</div>
        </div>
        <div id="typeChart" ref="type-chart" class="chart" />
      </div>
      <div class="row3">
        <div class="header">
          <div class="line" />
          <div class="text">设备报警趋势</div>
        </div>
        <div id="alarmChart" ref="alarm-chart" class="chart" />
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { timeStatistic, dataStatistic } from '@/api/cms/monitor/event'
import { connectStatusStatistic, deviceTypeStatistic, deviceStatusStatistic } from '@/api/cms/winglinks/device'
import { stateStatistic } from '@/api/cms/winglinks/product'
import Map from './map'
export default {
  components: {
    Map
  },
  data() {
    return {
      stateData: {
      },
      productStatistic: {
        TOTAL: 0,
        ONLINE_COUNT: 0,
        OFFLINE_COUNT: 0
      },
      deviceStatistic: {
        TOTAL: 0,
        INIT_COUNT: 0,
        ONLINE_COUNT: 0,
        OFFLINE_COUNT: 0
      },
      alarmStatistic: {
        TOTAL: 0,
        TODAY_COUNT: 0
      },
      alarmData: {
        xData: [this.moment().subtract(6, 'days').format('MM-DD'), this.moment().subtract(5, 'days').format('MM-DD'), this.moment().subtract(4, 'days').format('MM-DD'), this.moment().subtract(3, 'days').format('MM-DD'), this.moment().subtract(2, 'days').format('MM-DD'), this.moment().subtract(1, 'days').format('MM-DD'), this.moment().format('MM-DD')],
        yData: [0, 0, 0, 0, 0, 0, 0]
      }
    }
  },
  mounted() {
    this.init()
    this.initStateCharts()
    this.initTypeCharts()
    this.initAlarmCharts()
  },
  methods: {
    init() {
      stateStatistic().then(res => {
        if (res.data) {
          this.productStatistic = res.data
        }
      })
      connectStatusStatistic().then(res => {
        if (res.data) {
          this.deviceStatistic = res.data
        }
      })
      dataStatistic().then(res => {
        if (res.data) {
          this.alarmStatistic = res.data
        }
      })
    },
    initStateCharts() {
      deviceStatusStatistic().then(res => {
        if (res.data) {
          var axisData = []
          var online = []
          var offline = []
          res.data.forEach(item => {
            axisData.push(item.name)
            online.push(item.online)
            offline.push(item.offline)
          })

          const charts = echarts.init(this.$refs['state-chart'])
          const option = {
            tooltip: {
              show: true
            },
            // 坐标轴位置属性
            grid: {
              top: '15%'
              // left: '8%',
              // right: '8%',
              // bottom: '30%'
            },

            // 图例

            legend: {
              x: 'right', // 靠右
              data: ['在线数', '离线数'] // 这里要与下面的name对应
            },
            xAxis: [
              {
                type: 'category',
                data: axisData,
                axisLabel: {
                  interval: 0,
                  rotate: 40,
                  formatter: function(params) {
                    var newParamsName = ''
                    var paramsNameNumber = params.length
                    var provideNumber = 5 // 一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                    if (paramsNameNumber > provideNumber) {
                      for (var p = 0; p < rowNumber; p++) {
                        var tempStr = ''
                        var start = p * provideNumber
                        var end = start + provideNumber
                        if (p === rowNumber - 1) {
                          tempStr = params.substring(start, paramsNameNumber)
                        } else {
                          tempStr = params.substring(start, end) + '\n'
                        }
                        newParamsName += tempStr
                      }
                    } else {
                      newParamsName = params
                    }
                    return newParamsName
                  }
                }
              }
            ],
            yAxis: [
              {

                type: 'value',

                splitLine: { // 控制Y轴的分隔线(辅助线)
                  show: true, // 默认显示，属性show控制显示与否
                  lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                    color: ['#ccc'],
                    width: 1,
                    type: 'solid'
                  }
                }

              }
            ],
            series: [
              {
                'name': '在线数',
                'type': 'bar',
                barWidth: '20',
                stack: 'total',
                itemStyle: {
                  normal: { color: '#91CD76', // 柱状颜色
                    label: {
                      show: true, // 柱头数字
                      // position: 'insideTop',
                      position: 'top',
                      textStyle: {
                        fontSize: '10',
                        fontFamily: '微软雅黑',
                        fontWeight: 'bold'
                      },
                      formatter: function(params) {
                        if (params.value == 0) {
                          return ''
                        } else {
                          return params.value
                        }
                      }
                    }
                  }
                },
                'data': online
              },
              {
                'name': '离线数',
                'type': 'bar',
                barWidth: '20',
                stack: 'total',
                itemStyle: {
                  normal: { color: '#5470C6', // 柱状颜色
                    label: {
                      show: true, // 柱头数字
                      position: 'top',
                      textStyle: {
                        fontSize: '10',
                        fontFamily: '微软雅黑',
                        fontWeight: 'bold'
                      },
                      formatter: function(params) { // data的值为0时,不显示柱头文字
                        if (params.value == 0) {
                          return ''
                        } else {
                          return params.value
                        }
                      }
                    }
                  }
                },
                'data': offline
              }
            ]
          }
          charts.setOption(option, true)
        }
      })
    },
    initTypeCharts() {
      deviceTypeStatistic().then(res => {
        if (res.data) {
          const charts = echarts.init(this.$refs['type-chart'])
          const options = {
            color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'],
            legend: {
              type: 'scroll',
              orient: 'horizontal',
              icon: 'circle',
              x: 'center',
              y: 'bottom'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {c} ({d}%)' // 鼠标悬浮在各分区时的提示内容
            },
            series: [
              {
                type: 'pie',
                radius: ['30%', '60%'],
                center: ['50%', '44%'],
                avoidLabelOverlap: true,
                data: res.data,
                labelLine: {
                  show: true,
                  normal: {
                    length: 4
                  }
                },
                label: {
                  show: true
                }
              }
            ]
          }
          charts.setOption(options, true)
        }
      })
    },
    initAlarmCharts() {
      timeStatistic().then(res => {
        if (res.data && res.data.length > 0) {
          var xData = []
          var yData = []
          if (res.data.length() >= 10) {
            for (var i = 0; i < 10; i++) {
              xData.push(res.data[i].DATE_TEXT)
              yData.push(res.data[i].DATA_COUNT)
            }
          } else {
            res.data.forEach(item => {
              xData.push(item.DATE_TEXT)
              yData.push(item.DATA_COUNT)
            })
          }
          const charts = echarts.init(this.$refs['alarm-chart'])
          const options = {
            color: ['#FC8251'],
            // 图例
            legend: {
              data: ['报警'],
              x: 'right', // 靠右
              top: '0%'
            },
            xAxis: {
              type: 'category',
              data: xData,
              axisLabel: {
                interval: 0,
                rotate: 40
              }
            },
            yAxis: {
              type: 'value'
            },
            // 坐标轴位置属性
            grid: {
              top: '8%'
            },
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove',
              formatter: '{b}:{c}'
            },
            series: [
              {
                data: yData,
                type: 'line',
                smooth: true
              }
            ]
          }
          charts.setOption(options, true)
        } else {
          const charts = echarts.init(this.$refs['alarm-chart'])
          const options = {
            color: ['#FC8251'],
            // 图例
            legend: {
              data: ['报警'],
              x: 'right', // 靠右
              top: '0%'
            },
            xAxis: {
              type: 'category',
              data: this.alarmData.xData,
              axisLabel: {
                interval: 0,
                rotate: 40
              }
            },
            yAxis: {
              type: 'value'
            },
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove',
              formatter: '{b}:{c}'
            },
            // 坐标轴位置属性
            grid: {
              top: '8%'
            },
            series: [
              {
                data: this.alarmData.yData,
                type: 'line',
                smooth: true
              }
            ]
          }
          charts.setOption(options, true)
        }
      })
    },
    gotoProduct() {
      this.$router.push({ path: '/cms/product/index' })
    },
    gotoDevice() {
      this.$router.push({ path: '/cms/device-data/device' })
    }
  }
}
</script>

<style lang="scss" scoped>
  .header{
    height: 25px;
    width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    .line{
      width: 5px;
      height: 90%;
      background-color: #00afff;
      margin-right: 10px;
      border-radius: 4px;
    }
    .text{
      line-height: 100%;
      font-weight: 600;
      font-size: 18px;
    }
  }
  .col1{
    width: 67.5%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .row1{
      display: flex;
      flex-direction: column;
      height: 32.5%;
      width: 100%;
      border: 1px solid #eaeaea;
      background-color: #ffffff;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0px 1px 5px 0px #ccc;
      .container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex:1;
        color: #fff;
        .card_box{
          cursor: pointer;
          width: 33%;
          padding: 10px 30px;
          height: calc(100% - 20px);
          display: flex;
          flex-direction:column;
          justify-content: space-between;
          align-items: center;
          background-color: #E4E7ED;
          border-radius: 8px;
          background-repeat: no-repeat;
          background-position: left center;
          background-size: cover;
          &:first-child{
            background-image: url('../../../assets/images/c6/pnumBg.png');
          }
          &:nth-child(2){
            background-image: url('../../../assets/images/c6/dnumBg.png');
          }
          &:nth-child(3){
            background-image: url('../../../assets/images/c6/wnumBg.png');
          }
          .img{
            width: 56px;
            height: 56px;
          }
          .card_top{
            width: 100%;
            display: flex;
            height: 75%;
            align-items: center;
            .middle_box{
              display: flex;
              flex-direction: row;
              // justify-content: center;
              align-items: center;
              flex:1;
              .text{
                font-size: 22px;
                padding:0 20% 0 10%;
              }
              .value{
                font-weight: bold;
                font-size: 40px;
              }
            }
          }

          .card_bottom{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            flex: 1;
            align-items: center;
            .vertical{
              width: 2px;
              height: 60%;
              background-color: #ccc;
            }
            .text-box{
              display: flex;
              flex-direction: row;
              align-items: center;
              // .spot{
              //   width: 10px;
              //   height: 10px;
              //   border-radius: 50%;
              //   margin-right: 5px;
              // }
              .text{
                font-size: 18px;
              }
              .value{
                padding:0 10px;
                font-size: 20px;
              }
            }
          }

        }
      }
    }
    .row2{
      display: flex;
      flex-direction: column;
      height: 66%;
      width: 100%;
      border: 1px solid #eaeaea;
      background-color: #ffffff;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0px 1px 5px 0px #ccc;
      .header{
        height: 25px;
        width: 200px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 10px;
        .line{
          width: 5px;
          height: 90%;
          background-color: #00afff;
          margin-right: 10px;
          border-radius: 4px;
        }
        .text{
          line-height: 100%;
          font-weight: 600;
          font-size: 18px;
        }
      }
      .map_box{
        height: calc( 100% - 25px );
        width: 100%;
        .chart-map{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .col2{
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .chart{
      width: 100%;
      height: calc(100% - 25px);
    }
    .row1{
      height: 32.5%;
      width: 100%;
      display: flex;
      flex-direction: column;
      border: 1px solid #eaeaea;
      background-color: #ffffff;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0px 1px 5px 0px #ccc;
    }
    .row2{
      height: 32.5%;
      width: 100%;
      display: flex;
      flex-direction: column;
      border: 1px solid #eaeaea;
      background-color: #ffffff;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0px 1px 5px 0px #ccc;
    }
    .row3{
      height: 32.5%;
      width: 100%;
      display: flex;
      flex-direction: column;
      border: 1px solid #eaeaea;
      background-color: #ffffff;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0px 1px 5px 0px #ccc;
    }
  }
</style>
